<template>
  <header class="app-header">
    <nav class="navbar navbar-expand-lg navbar-light">
      <ul class="navbar-nav">
        <li class="nav-item d-block d-xl-none">
          <a
            class="nav-link sidebartoggler nav-icon-hover"
            id="headerCollapse"
            href="javascript:void(0)"
          >
            <i class="ti ti-menu-2"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link nav-icon-hover" href="javascript:void(0)">
            <i class="ti ti-bell-ringing"></i>
            <div class="notification bg-primary rounded-circle"></div>
          </a>
        </li>
      </ul>
      <div class="navbar-collapse justify-content-end px-0" id="navbarNav">
        <ul
          class="navbar-nav flex-row ms-auto align-items-center justify-content-end"
        >
          <a href="#" class="btn btn-primary">Download Free</a>
          <li class="nav-item dropdown">
            <a
              class="nav-link nav-icon-hover"
              href="javascript:void(0)"
              id="drop2"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <img
                src="/assets/images/profile/user-1.jpg"
                alt=""
                width="35"
                height="35"
                class="rounded-circle"
              />
            </a>
            <div
              class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up"
              aria-labelledby="drop2"
            >
              <div class="message-body">
                <a
                  href="javascript:void(0)"
                  class="d-flex align-items-center gap-2 dropdown-item"
                >
                  <i class="ti ti-user fs-6"></i>
                  <p class="mb-0 fs-3">My Profile</p>
                </a>
                <a
                  href="javascript:void(0)"
                  class="d-flex align-items-center gap-2 dropdown-item"
                >
                  <i class="ti ti-mail fs-6"></i>
                  <p class="mb-0 fs-3">My Account</p>
                </a>
                <a
                  href="javascript:void(0)"
                  class="d-flex align-items-center gap-2 dropdown-item"
                >
                  <i class="ti ti-list-check fs-6"></i>
                  <p class="mb-0 fs-3">My Task</p>
                </a>
                <a
                  href="./authentication-login.html"
                  class="btn btn-outline-primary mx-3 mt-2 d-block"
                  >Logout</a
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </header>
</template>
<script setup>
import { onMounted } from "vue";
onMounted(() => {
  $(function () {
    // Admin Panel settings

    //****************************
    /* This is for the mini-sidebar if width is less then 1170*/
    //****************************
    var setsidebartype = function () {
      var width = window.innerWidth > 0 ? window.innerWidth : this.screen.width;
      if (width < 1199) {
        $("#main-wrapper").attr("data-sidebartype", "mini-sidebar");
        $("#main-wrapper").addClass("mini-sidebar");
      } else {
        $("#main-wrapper").attr("data-sidebartype", "full");
        $("#main-wrapper").removeClass("mini-sidebar");
      }
    };
    $(window).ready(setsidebartype);
    $(window).on("resize", setsidebartype);
    //****************************
    /* This is for sidebartoggler*/
    //****************************
    $(".sidebartoggler").on("click", function () {
      console.log("clicked");
      $("#main-wrapper").toggleClass("mini-sidebar");
      if ($("#main-wrapper").hasClass("mini-sidebar")) {
        $(".sidebartoggler").prop("checked", !0);
        $("#main-wrapper").attr("data-sidebartype", "mini-sidebar");
      } else {
        $(".sidebartoggler").prop("checked", !1);
        $("#main-wrapper").attr("data-sidebartype", "full");
      }
    });
    $(".sidebartoggler").on("click", function () {
      $("#main-wrapper").toggleClass("show-sidebar");
    });
  });
  console.log("mounted");
});
</script>
